<template>
	<view class="">
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="mx-2 mt-2 py-4 px-3 rounded-top withdraw_title d-flex">
				<view class="">提现方式</view>
				<view class="d-flex j-sb flex-1 ml-3" @click="withdraw_click">
					<view class="">
						<view class="">
							<view v-if="bank_index==0" class="font-weight"><text>{{bank_name}}</text><text class="ml-2">{{'('+bank_card.substr(bank_card.length-4)+')'}}</text></view>
							<view v-else class="font-weight"><text>账户余额</text><text class="ml-2">{{'('+withdraw[1].bank_name+')'}}</text></view>
						</view>
						<view class="font-29 text-muted mt-1">预计48小时内到账</view>
					</view>	
					<view class="">
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
			</view>
			<view class="mx-2 mb-2 py-9 px-3 rounded-bottom withdraw_footer">
				<view class="">提现金额</view>
				<view class="mt-4 pb-3 border-bottom d-flex a-center">
					<view class="font-big font-weight">￥</view>
					<view class="ml-2 draw_input">
						<input type="digit" class="font-big" @input="amount_input" v-model="amount" :focus="true" value="" />
					</view>
				</view>
				<view class="mt-2">
					可提现余额<text class="font-weight">{{store_account.seller_money}}</text>,<text class="ml-1 text-primary" @click="all_ways">全部提现</text>
				</view>
				<view class="mt-5">
					<view class="bg-white drawing w-100">
						<button type="warn" @click="next_sub">提现</button>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="withdraw_show" mode="bottom" length="60%" :border-radius="20">
			<view class="d-flex j-sb border-bottom a-center mx-5 py-4 mt-1">
				<view class="" @click="close">
					<u-icon name="close" color="#333333" size="40"></u-icon>
				</view>
				<view class="text-center">
					<view class="font-35 font-weight">选择提现的方式</view>
					<view class="text-666">到账时间已实际到账时间为主</view>
				</view>
				<view class=""></view>
			</view>
			<view class="border-bottom mx-5">
				<view class="d-flex">
					<view class="py-4">
						<image src="../../static/images/wallet/bank-card.png" class="bank_img" mode=""></image>
					</view>
					<view class="flex-1 py-4 ml-3 border-bottom d-flex j-sb" @click="bank_tab(0)">
						<view class="">
							<view class="font-lg">
								<text>{{bank_name}}</text>
								<text class="ml-2">{{'('+bank_card.substr(bank_card.length-4)+')'}}</text>
							</view>
							<view class="text-666">预计48小时内到账</view>
						</view>
						<u-icon name="checkbox-mark" color="#fc393d" size="40" v-show="bank_index==0"></u-icon>
					</view>
				</view>
				<view class="d-flex">
					<view class="py-4">
						<image src="../../static/images/wallet/balance.png" class="bank_img" mode=""></image>
					</view>
					<view class="flex-1 py-4 ml-3 d-flex j-sb" @click="bank_tab(1)">
						<view class="">
							<view class="font-lg">
								<text>账户余额</text>
								<text class="ml-2">{{'('+withdraw[1].bank_name+')'}}</text>
							</view>
							<view class="text-666">预计48小时内到账</view>
						</view>
						<u-icon name="checkbox-mark" color="#fc393d" size="40" v-show="bank_index==1"></u-icon>
					</view>
				</view>
			</view>
			<view class="bank_comfirm py-3">
				<button type="default" @click="bank_btn">确定</button>
			</view>
		</u-popup>
		<u-toast ref="uToast"/>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				amount:"", // 提现金额
				withdraw:"", // 提现方式
				withdraw_show:false, // 弹框
				store_account:"", // 首页统计数据
				bank_name:"", // 银行名称
				bank_card:"", // bank_card
				bank_type:"", // 提现方式
				bank_index:0, // 银行标识
				u_loadmore:true, // 加载中
			}
		},
		methods:{
			// 选择切换银行卡
			bank_tab(e){
				this.bank_index=e
			},
			// 提现方式
			withdraw_click(){
				this.withdraw_show=true
			},
			close(){
				this.withdraw_show=false
			},
			// 提现金额
			amount_input(e){
				this.amount=e.detail.value
				// this.$refs.uToast.show({
				// 	title: "输入金额超过余额",
				// 	type: 'default',
				// })	
			},
			bank_btn(){
				this.withdraw_show=false
				if(this.bank_index==0){
					this.bank_type="bank"
				}else if(this.bank_index==1){
					this.bank_type="user_banlance"
				}
			},
			// 全部提现
			all_ways(){
				this.amount=this.store_account.seller_money.replace("￥",'')
			},
			// 提现
			next_sub(){
					this.$H.post("v2/store/withdraw/apply",{
						amount:this.amount,
						withdraw_way:this.bank_type
					}).then(res=>{
						if(res.status.succeed==0){
							this.$refs.uToast.show({
								title: res.status.error_desc,
								type: 'default'
							})
						}else{
							this.$refs.uToast.show({
								title: "提现成功",
								type: 'success',
								url: '/pagesA/store/store-withdraw-details?log_id='+res.data.log_id
							})
							this.$H.post("v2/store/home/data").then(res=>{
								this.store_account=res.data.store_account
								console.log(res)
							})
							this.amount=""
						}
					})
					
			}
		},
		onLoad(){
			// 提现方式
			this.$H.post("v2/store/withdraw/ways").then(res=>{
				this.withdraw=res.data
				this.bank_name=res.data[0].bank_name
				this.bank_card=res.data[0].bank_card
				this.bank_type=res.data[0].bank_type
				this.u_loadmore=false
			})
			// 掌柜首页统计数据
			this.$H.post("v2/store/home/data").then(res=>{
				this.store_account=res.data.store_account
				console.log(res)
				this.u_loadmore=false
			})
		}
	}
</script>

<style>
	page{
		background-color: #e7e7e7;
	}
	.withdraw_title{
		background-color: #F1F1F1;
	}
	.withdraw_footer{
		background-color: #FFFFFF;
	}
	.drawing /deep/ button{
		width: 95%;
		border-radius: 50upx;
		background: linear-gradient(to right,#f84d25,#f5403b);
	}
	.draw_input input{
		height: 100upx;
	}
	.bank_img{
		width: 80upx;
		height: 80upx;
	}
	.bank_comfirm /deep/ button{
		width: 50%;
		border-radius: 50upx;
		color: #FFFFFF;
		border: none;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
</style>
